/*ok-loading*/
.ok-loading {
	position:absolute;
	display:block;
	width:100%;
	height:100%;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:19891017;
	background-color:#fff
}
.ok-loading.close {
	animation:close 1s;
	-webkit-animation:close 1s;
	animation-fill-mode:forwards
}
.ball-loader {
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	-webkit-transform:translate(-50%,-50%)
}
.ball-loader>span,.signal-loader>span {
	background-color:#4aca85;
	display:inline-block
}
.ok-loading.orange_theme .ball-loader>span,.signal-loader>span {
	background-color:#ff4806
}
.ok-loading.blue_theme .ball-loader>span,.signal-loader>span {
	background-color:#2d8cf0
}
.ball-loader.sm>span:nth-child(1),.ball-loader>span:nth-child(1),.signal-loader.sm>span:nth-child(1),.signal-loader>span:nth-child(1) {
	-webkit-animation-delay:0s;
	animation-delay:0s
}
.ball-loader.sm>span:nth-child(2),.ball-loader>span:nth-child(2),.signal-loader.sm>span:nth-child(2),.signal-loader>span:nth-child(2) {
	-webkit-animation-delay:.1s;
	animation-delay:.1s
}
.ball-loader.sm>span:nth-child(3),.ball-loader>span:nth-child(3),.signal-loader.sm>span:nth-child(3),.signal-loader>span:nth-child(3) {
	-webkit-animation-delay:.15s;
	animation-delay:.15s
}
.ball-loader.sm>span:nth-child(4),.ball-loader>span:nth-child(4),.signal-loader.sm>span:nth-child(4),.signal-loader>span:nth-child(4) {
	-webkit-animation-delay:.2s;
	animation-delay:.2s
}
.ball-loader>span {
	width:20px;
	height:20px;
	margin:0 3px;
	border-radius:50%;
	transform:scale(0);
	-ms-transform:scale(0);
	-webkit-transform:scale(0);
	animation:ball-load 1s ease-in-out infinite;
	-webkit-animation:1s ball-load ease-in-out infinite
}
@-webkit-keyframes ball-load {
	0% {
		transform:scale(0);
		-webkit-transform:scale(0)
	}
	50% {
		transform:scale(1);
		-webkit-transform:scale(1)
	}
	100% {
		transform:scale(0);
		-webkit-transform:scale(0)
	}
}
@keyframes ball-load {
	0% {
		transform:scale(0);
		-webkit-transform:scale(0)
	}
	50% {
		transform:scale(1);
		-webkit-transform:scale(1)
	}
	100% {
		transform:scale(0);
		-webkit-transform:scale(0)
	}
}
@-webkit-keyframes close {
	0% {
		opacity:1
	}
	100% {
		opacity:0
	}
}

/*样式2*/
.loader-main{
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: whitesmoke;
	z-index: 9999999;
}
.loader {
	width: 50px;
	height: 50px;
	margin: 20% auto 40px;
	position: relative;
	z-index: 999999;
	background-color: whitesmoke;
}
.loader:before {
	content: "";
	width: 50px;
	height: 7px;
	border-radius: 50%;
	background: #000;
	opacity: 0.1;
	position: absolute;
	top: 59px;
	left: 0;
	animation: shadow .5s linear infinite;
}
.loader:after {
	content: "";
	width: 50px;
	height: 50px;
	border-radius: 3px;
	background-color: #5FB878;
	position: absolute;
	top: 0;
	left: 0;
	animation: loading .5s linear infinite;
}
@-webkit-keyframes loading {
	17% {
		border-bottom-right-radius: 3px;
	}
	25% {
		transform: translateY(9px) rotate(22.5deg);
	}
	50% {
		transform: translateY(18px) scale(1, 0.9) rotate(45deg);
		border-bottom-right-radius: 40px;
	}
	75% {
		transform: translateY(9px) rotate(67.5deg);
	}
	100% {
		transform: translateY(0) rotate(90deg);
	}
}
@keyframes loading {
	17% {
		border-bottom-right-radius: 3px;
	}
	25% {
		transform: translateY(9px) rotate(22.5deg);
	}
	50% {
		transform: translateY(18px) scale(1, 0.9) rotate(45deg);
		border-bottom-right-radius: 40px;
	}
	75% {
		transform: translateY(9px) rotate(67.5deg);
	}
	100% {
		transform: translateY(0) rotate(90deg);
	}
}
@-webkit-keyframes shadow {
	0%,
	100% {
		transform: scale(1, 1);
	}
	50% {
		transform: scale(1.2, 1);
	}
}
@keyframes shadow {
	0%,
	100% {
		transform: scale(1, 1);
	}
	50% {
		transform: scale(1.2, 1);
	}
}

